<template>
  <div class="">
    <el-dialog @close="close" :title="$tt('label_purchase_set_purchasing_channels')" append-to-body :visible.sync="dialogVisible"  custom-class="dialog_big">
      <div class="mg_b2 channelSub">
        <el-button class="mg_r2" :disabled="rows.length === 50" @click="add">{{$tt('label_add')}}</el-button>{{$tt('label_purchase_set_50_purchasing_channels')}}
      </div>
      <ex_super_table ref="table" :model="buildTableModel" height="300" :data="rows" class="w_fill"></ex_super_table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$tt('label_close')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components:{

  },
  props:{
    dialogData: Object,
  },
  data () {
    return {
      dialogVisible: false,
      value: '',
      rows: [],

    }
  },
  watch: {
  },
  computed: {
    buildTableModel() {
      return [
        {
          key: "purchaseChannel",
          label: "label_purchase_purchasing_channels",
          render: (h, { row, column }) => {
            if(row.isEdit) {
              return h('el-input', {
                props: {
                  value: row.purchaseChannel,
                },
                on: {
                  input: (e) => {
                    this.$set(row, column.property, e)
                  }
                }
              })
            } else {
              return (<span>{row.purchaseChannel}</span>)
            }
          }
        },
        {
          type: "operate",
          width: 150,
          operate: [
            {
              if: (row) => row.isEdit,
              label: "label_save",
              click: (row,i) => {
                this.save(row,i)
              },
            },
            {
              if: (row) => row.isEdit,
              label: "label_cancel",
              click: (row,i) => {
                if (row.id) {
                  this.$set(this.rows, i, {
                    ...row,
                    isEdit: false,
                  })
                } else {
                  this.$delete(this.rows, i)
                }
              },
            },
            {
              if: (row) => !row.isEdit,
              label: "label_edit",
              click: (row,i) => {
                this.$set(this.rows, i, {
                  ...row,
                  isEdit: true,
                })
              },
            },
            {
              if: (row) => !row.isEdit,
              label: "label_delete",
              click: (row,i) => {
                this.del(row,i)
              },
            },
          ],
        },
      ]
    },
  },
  created () {

  },
  mounted () {

  },
  methods: {
    close() {
      this.$emit('close')
    },
    add() {
      this.rows.push({
        isEdit: true,
        purchaseChannel: '',
        customerId: this.dialogData.customerId,
      })
    },
    show(arr = []) {
      this.dialogVisible = true
      this.rows = arr.map(item => {
        item.isEdit = false
        return item
      })
    },
    hide() {
      this.dialogVisible = false
    },
    save(row,i) {
      this.$ajax({
        url: '/oms-api/purchase/OmsPurchaseChannelRpc/saveOrUpdate.json',
        type: 'json',
        loading: 'loading',
        data: {
          customerId: row.customerId,
          purchaseChannel: row.purchaseChannel,
          id: row.id,
        },
        success: (res) => {
          this.$set(this.rows, i, {
            isEdit: false,
            purchaseChannel: row.purchaseChannel,
            customerId: row.customerId,
            id: res.data.id
          })
        },
      })
    },
    del(row,i) {
      this.$ajax({
        url: '/oms-api/purchase/OmsPurchaseChannelRpc/delete.json',
        type: 'json',
        loading: 'loading',
        data: {
          customerId: row.customerId,
          purchaseChannel: row.purchaseChannel,
          id: row.id,
        },
        success: (res) => {
          this.$delete(this.rows, i)
        },
      })

    },
  },
  destroyed () {

  }
};
</script>

<style lang="less" scoped>
.channelSub {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  align-items: center;
}
</style>
